<template>
  <div class="page-header-container" id="page-header-container">
    <!-- logo -->
    <div class="logo"></div>

    <!-- 选择组织机构 -->
    <chooseOrganization @chooseTenant="openTenantModal()"></chooseOrganization>

    <!-- 子系统面板 -->
    <subsystemPanel :data="subSystemSource"></subsystemPanel>

    <!-- 数据看板 -->
    <div
      class="data-board"
      :class="checkDataBoardActive()"
      v-if="!isEmptyObject(dataBoard)"
      @click="gotoDataBoard()"
    >
      数据看板
    </div>

    <!-- 业务数据 -->
    <div
      class="service-data-board"
      :class="checkServiceActive() && 'active'"
      @click="gotoService()"
      v-if="serviceSource.length > 0"
    >
      业务数据
    </div>

    <div class="system-toolbar-container">
      <!-- 项目部大屏 -->
      <div class="command-center" @click="gotoDepartmentVisual()">
        <bj-icon-font
          type="xietongzhihuidaping"
          color="#fff"
          :size="20"
        ></bj-icon-font>
        项目部管控中心
      </div>
      <!-- 指挥中心【按钮】 -->
      <div
        class="command-center"
        v-if="isShowByMenuType(3)"
        @click="gotoCommandCenter()"
      >
        <bj-icon-font
          type="xietongzhihuidaping"
          color="#fff"
          :size="20"
        ></bj-icon-font>
        {{ getDataBoardName() }}
      </div>

      <!-- 配置中心 -->
      <configPanel v-if="isShowByMenuType(1)"></configPanel>

      <!-- 待办列表 -->
      <todoTip
        v-if="organization.tenantTypeValue == 3"
        ref="todo-tip"
      ></todoTip>

      <!-- 登录用户信息 -->
      <a-popover
        trigger="click"
        v-model="loginUserVisible"
        placement="bottomLeft"
        overlayClassName="login-user-popover"
        :getPopupContainer="getPopupContainer"
      >
        <a slot="content">
          <div class="login-user-menu-container">
            <div class="title flex">
              <div class="icon"></div>
              <div class="details">
                <div>{{ userInfo.nickName || "--" }}</div>
                <div>{{ userInfo.mobile || "--" }}</div>
              </div>
            </div>
            <div class="container">
              <div
                class="operate-menu icon_2"
                @click="(forgetModaVisible = true), (loginUserVisible = false)"
              >
                修改密码
              </div>
              <div class="operate-menu icon_3" @click="exitConfirm()">
                退出登录
              </div>
            </div>
          </div>
        </a>
        <div class="login-user flex">
          <bj-icon-font
            type="gerenzhognxin"
            color="#fff"
            :size="24"
          ></bj-icon-font>
          <div class="user-name">{{ userInfo.nickName || "--" }}</div>
        </div>
      </a-popover>

      <!-- 全屏【按钮】 -->
      <div
        class="full-screen-btn"
        @click="!isFull ? fullScreen() : exitFullscreen()"
      >
        <bj-icon-font type="quanping" color="#fff" :size="20"></bj-icon-font>
      </div>
    </div>

    <!-- 选择、切换租户【弹窗】 -->
    <chooseTenant :visible.sync="chooseTenantVisible"></chooseTenant>

    <!-- 修改密码 -->
    <changePassword :visible.sync="forgetModaVisible"></changePassword>
  </div>
</template>
<script>
import URLParse from "url-parse";

import { mapGetters } from "vuex";
import { isEmptyObject, saveData, getFirstMenu } from "@/tools";
import { flatTreeData } from "@/utils";
import chooseTenant from "./chooseTenant.vue";
import changePassword from "./changePassword.vue";
import subsystemPanel from "./subsystemPanel.vue";
import configPanel from "./configPanel.vue";
import chooseOrganization from "./chooseOrganization.vue";
import todoTip from "./todoTip";
export default {
  components: {
    chooseTenant,
    changePassword,
    subsystemPanel,
    configPanel,
    chooseOrganization,
    todoTip,
  },
  computed: {
    ...mapGetters([
      "userInfo",
      "permissionData",
      "serviceSource",
      "currentMenu",
      "dataBoard",
      "organization",
    ]),
  },

  data() {
    return {
      //全屏标识
      isFull: false,

      //选择租户弹窗是否可见
      chooseTenantVisible: false,

      //登录用户信息下拉框是否可见
      loginUserVisible: false,

      //修改密码弹窗是否可见
      forgetModaVisible: false,

      //子系统列表
      subSystemSource: [],
    };
  },

  watch: {
    //监听权限数据
    permissionData: {
      handler(val) {
        this.getSubSystemSource();
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    window.addEventListener("resize", () => {
      this.isFull = !!(
        document.webkitIsFullScreen ||
        document.mozFullScreen ||
        document.msFullscreenElement ||
        document.fullscreenElement
      );
    });
  },
  methods: {
    getDataBoardName() {
      let data = this.permissionData.find((v) => v.menuType == 3);
      return data?.menuName ?? "指挥中心";
    },

    //跳转项目部大屏
    gotoDepartmentVisual() {
      let { uid, username } = this.userInfo;
      let domain = this.getDomainPath();
      window.open(
        `${domain}/department-visual/?uid=${uid}&id=${username}&sign=${new Date().getTime()}`,
        "_blank"
      );
    },

    //获取系统当问的域名
    getDomainPath() {
      let { origin } = window.location;
      let { VUE_APP_CURRENTMODE } = process.env;
      let domain = "";
      if (VUE_APP_CURRENTMODE == "build") {
        domain = origin;
      } else {
        domain = `http://219.139.133.163:70`;
      }
      return domain;
    },

    //跳转指挥中心大屏
    gotoCommandCenter() {
      let { path } = this.permissionData.find((v) => v.menuType == 3) ?? {};
      let { uid, username } = this.userInfo;
      let domain = this.getDomainPath();
      const url = new URLParse(path);
      window.open(
        `${path.replace(
          url.origin,
          domain
        )}?uid=${uid}&id=${username}&sign=${new Date().getTime()}`,
        "_blank"
      );
    },
    //查询子系统列表
    getSubSystemSource() {
      let { childs = [] } = this.permissionData.find(
        (v) => v.menuType == 0
      ) || { childs: [] };
      this.subSystemSource = childs;
    },

    //根据menuType判断元素是否可见
    isShowByMenuType(menuType = "") {
      return this.permissionData.find((v) => v.menuType == menuType);
    },

    //打开选择租户弹窗
    openTenantModal() {
      this.chooseTenantVisible = true;
    },

    //退出系统
    exitConfirm() {
      let _this = this;
      this.loginUserVisible = false;
      this.$confirm({
        title: "确定退出系统吗？",
        onOk() {
          return new Promise((resolve) => {
            setTimeout((_) => {
              //待办铃铛显示，退出关闭webSocket
              if (_this.organization.tenantTypeValue == 3) {
                _this.$refs["todo-tip"].closeSocket();
              }
              _this.$router.replace({
                path: "/login",
              });
            }, 100);
            resolve();
          });
        },
        onCancel() {
          console.log("Cancel");
        },
      });
    },

    //全屏
    fullScreen() {
      let element = document.documentElement;
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      }
    },

    //退出全屏
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },

    getPopupContainer() {
      return document.getElementById("page-header-container");
    },

    //数据看板是否选中
    checkDataBoardActive() {
      let { menuCode } = this.currentMenu;
      if (menuCode && menuCode.endsWith("HOME_PAGE")) {
        return "active";
      }
    },

    //业务数据是否选中
    checkServiceActive() {
      let { menuCode } = this.currentMenu;
      let codes = flatTreeData(this.serviceSource, "childs").map(
        (v) => v.menuCode
      );
      return codes.includes(menuCode);
    },

    //跳转数据看板
    gotoDataBoard() {
      saveData("CURRENT_MENU", this.dataBoard);
    },

    //跳转业务数据模块
    gotoService() {
      saveData("CURRENT_MENU", getFirstMenu(this.serviceSource));
    },

    isEmptyObject,
  },
};
</script>
<style lang="less" scoped>
.page-header-container {
  height: 64px;
  flex-shrink: 0;
  background: var(--primary-color) no-repeat 26px center;
  background-size: auto 40px !important;
  background-repeat: no-repeat !important;
  background-position: 26px center !important;
  background-color: var(--primary-color) !important;
  .flex();
  align-items: center;
  /deep/.login-user-popover {
    .ant-popover-inner-content {
      padding: 0;
    }
    .login-user-menu-container {
      width: 250px;
      display: flex;
      flex-direction: column;
      .title {
        padding: 10px 20px;
        align-items: center;
        border-bottom: 1px solid #dadada;
        color: #666;
        .icon {
          height: 50px;
          width: 50px;
          background: url("~@/assets/images/qr.png");
          flex-shrink: 0;
          margin-right: 10px;
          background-size: 100% 100%;
        }
      }
      .container {
        color: #666;
        padding: 20px 20px 10px 20px;
        .operate-menu {
          margin-bottom: 14px;
          padding-left: 26px;
          .flex();
          &.icon_1 {
            background: url("~@/assets/images/user-icon.png") no-repeat left
              center;
            background-size: 20px 20px;
          }
          &.icon_2 {
            background: url("~@/assets/images/modify-pas-icon.png") no-repeat
              left center;
            background-size: 20px 20px;
          }
          &.icon_3 {
            background: url("~@/assets/images/exit-icon.png") no-repeat left
              center;
            background-size: 20px 20px;
          }
          height: 30px;
          line-height: 30px;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
  //logo
  .logo {
    width: 172px;
    height: 25px;
    background: url("~@/assets/images/logo_2.png") no-repeat;
    background-size: 100% 100%;
    margin: 0 0 0 10px;
  }

  //数据看板
  .data-board {
    color: #fff;
    height: 100%;
    font-size: 16px;
    .flex();
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 120px;
    &.active {
      background: #005ba0;
    }
  }

  //业务数据
  .service-data-board {
    .data-board();
    margin-left: 0;
    &.active {
      background: #005ba0;
    }
  }
  .system-toolbar-container {
    margin-left: auto;
    .flex();
    //指挥中心
    .command-center {
      align-items: center;
      margin: 0 20px;
      color: #fff;
      font-size: 15px;
      cursor: pointer;
      .flex();
      align-items: center;
      .bj-icon {
        margin-right: 8px;
      }
    }

    //用户登录信息
    .login-user {
      align-items: center;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      margin: 0 20px;

      .bj-icon {
        font-size: 24px;
        margin-right: 10px;
      }
    }

    //全屏按钮
    .full-screen-btn {
      position: relative;
      color: #fff;

      &::before {
        height: 24px;
        width: 2px;
        background: rgba(255, 255, 255, 0.4);
        transform: translateY(-50%);
        border-right: 1px solid rgba(0, 0, 0, 0.8);
        content: "";
        position: absolute;
        top: 50%;
      }
      .bj-icon {
        margin: 0 10px;
        cursor: pointer;
      }
    }
  }
}
</style>
